<template>
  <view>
    <view class="bottom-inner">
      <view class="bottom-title">第一项信息</view>
      <view>
        <u--form :model="InfoForm" ref="uForm" :rules="InfoFormRules">
          <u-form-item prop="height" label="身高" @click="showHeight">
            <u--input
              @click="showHeight"
              v-model="InfoForm.height"
              placeholder="请选择身高"
              suffixIconStyle="font-size: 20px;color: #909399"
              style="width: 140px"
              readonly
              
            >
              <u--text
                text="cm"
                slot="suffix"
                margin="0 3px 0 0"
                type="tips"
              ></u--text>
            </u--input>
            <!-- suffixIcon="icon iconfont icon-limi" -->
          </u-form-item>
          <u-form-item prop="weight" label="体重" @click="showWeight">
            <u--input
              @click="showWeight"
              v-model="InfoForm.weight"
              placeholder="请选择体重"
              suffixIconStyle="font-size: 20px;color: #909399"
              style="width: 140px"
              readonly
            >
              <u--text
                text="kg"
                slot="suffix"
                margin="0 3px 0 0"
                type="tips"
              ></u--text>
            </u--input>
            <!-- suffixIcon="icon iconfont icon-qianke" -->
          </u-form-item>
        </u--form>
      </view>
    </view>

    <view class="bottom-inner">
      <view class="bottom-title">数据分析</view>
      <view>
        <view class="text-box">
          <text class="text-box-title">BMI指数：</text>
          <text>{{ BMI }}</text>
        </view>
        <view  class="text-box">
          <text class="text-box-title">体重指：</text>
          <text :class="className" v-if="BMI"> <text :class="'icon iconfont icon-' + className" style="font-size: 24px;margin-right: 4px;"></text> {{ computedZhiShu(BMI) }} </text>
        </view>
      </view>
    </view>
    <view class="bottom-box">
      <u-button type="primary" size="large" @click="submitFirst">
        <text class="icon iconfont icon-submit" style="padding-right: 10px"></text>
        提交
      </u-button>
    </view>
    <view>
      <u-picker title="请选择身高(cm)" :show="heightShow" :columns="heightColumns" :defaultIndex="defaultHeightIndex" @cancel="heightShow = !heightShow" @confirm="heightConfirm"></u-picker>
      <u-picker title="请选择体重(kg)" :show="weightShow" :columns="weightColumns" :defaultIndex="defaultWeightIndex" @cancel="weightShow = !weightShow" @confirm="weightConfirm"></u-picker>
    </view>
    <quick-message ref="message"></quick-message>
  </view>
</template>
<script>
import mRequest from '@/api/index.js'
import hccmStore from '@/common/hccm-store.js'
export default {
  props:{
    studentId: {
      type: String,
      default: ''
    },
  },
  data() {
    return{
      BMI: '',
      className: '',
      heightShow: false,
      heightColumns: [],
      defaultHeightIndex: [50,4],
      weightShow: false,
      weightColumns:[],
      defaultWeightIndex: [10,4],
      InfoForm: {
				height: '',
        heightBak: [],
        weight: '',
        weightBak: [],
			},
			InfoFormRules: {
				height: [
					{
						required: true,
						message: '请选择身高',
						trigger: ['blur', 'change']
					}
				],
				weight: [
					{
						required: true,
						message: '请选择体重',
						trigger: ['blur', 'change']
					}
				],
			}
    }
  },
  onLoad(){
  },
  methods:{
    computedZhiShu(val){
      if(val < 18.5){
        this.className = 'qing'
        return '体重过轻'
      } else if (val >= 18.5 && val < 24){
        this.className = 'zhengchang'
        return '体重正常'
      } else if (val >= 24 && val < 28){
        this.className = 'chaozhong'
        return '超重'
      } else if (val >= 28){
        this.className = 'feipang'
        return '肥胖'
      } 
    },
    loadConfig(){
      let heightColumns = []
      for(let i = 110; i <= 200; i ++ ){
        heightColumns.push(i)
      }
      this.heightColumns = [heightColumns,[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9]]
      let weightColumns = []
      for(let i = 30; i <= 100; i ++ ){
        weightColumns.push(i)
      }
      this.weightColumns = [weightColumns,[0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9]]
    },
    // 获取第一项体检详情
    getInspectDetailList(){
      let params = {
        inspectId: hccmStore.getChooseInspectId(),
        studentId:this.studentId,
        project:'第一项',
        limit:100,
        page: 1,
      }
      mRequest.inspectDetailList(params).then(res=>{
        console.log(res.data.records)
        res.data.records.map(items=>{
          if(items.item == '身高'){
            let height = items.itemDetail.slice(0,-2)
            this.InfoForm.height = height
            this.InfoForm.heightBak = height.split(".")
          }
          if(items.item == '体重'){
            let weight = items.itemDetail.slice(0,-2)
            this.InfoForm.weight = weight
            this.InfoForm.weightBak = weight.split(".")
          }
        })
      })
    },
    showHeight(){
      this.heightShow = true
    },
    heightConfirm(val){
      this.defaultHeightIndex = val.indexs
      this.InfoForm.heightBak = val.value
      this.InfoForm.height = (Number(val.value[0]) + Number(val.value[1])).toFixed(1)
      this.heightShow = false
    },
    showWeight(){
      this.weightShow = true
    },
    weightConfirm(val){
      this.defaultWeightIndex = val.indexs
      this.InfoForm.weightBak = val.value
      this.InfoForm.weight = (Number(val.value[0]) + Number(val.value[1])).toFixed(1)
      this.weightShow = false
    },

    // 提交
    submitFirst(){
      console.log(hccmStore.getChooseInspectId(),this.studentId)
      this.$refs.uForm.validate().then(res => {
        let params = [
          {
            inspectId: hccmStore.getChooseInspectId(),
            studentId:this.studentId,
            project: '第一项',
            item: '身高',
            itemDetail: `${this.InfoForm.height}cm`,
            bodyPart: '',
            level: '',
          },
          {
            inspectId: hccmStore.getChooseInspectId(),
            studentId:this.studentId,
            project: '第一项',
            item: '体重',
            itemDetail: `${this.InfoForm.weight}kg`,
            bodyPart: '',
            level: '',
          },
          {
            inspectId: hccmStore.getChooseInspectId(),
            studentId:this.studentId,
            project: '第一项',
            item: 'BMI',
            itemDetail: this.BMI,
            bodyPart: '',
            level: '',
          },
        ]
        mRequest.inspectDetailSave(params).then(res=>{
          console.log(res)
          this.$refs.message.show({
            type:'success', //String 默认default
            msg:'第一项信息保存成功', //String 显示内容 *
            direction:'top', //String 默认顶部显示
            icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
            mask:true, //Boolean 遮罩（默认false没有遮罩）
            time:2000, //Number|Boolean 默认3000/false为不自动关闭
            customStyle:{ //自定义样式
              // color:'#FFFFFF', //字体图标色
              // backgroundColor:'rgba(0,0,0,.5)', //背景色
              fontSize: 12,
            }, 
            iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
            iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
          })
          setTimeout(() => {
            uni.reLaunch({ 
              url: '/pages/home/first/index'
            });
          }, 1000);
        })
        console.log(params)
      }).catch(errors => {
        this.$refs.message.show({
          type:'error', //String 默认default
          msg:'请先填写必要信息', //String 显示内容 *
          direction:'top', //String 默认顶部显示
          icon:true, //Boolean|String 显示icon(false/true/string 默认显示icon)
          mask:true, //Boolean 遮罩（默认false没有遮罩）
          time:2000, //Number|Boolean 默认3000/false为不自动关闭
          customStyle:{ //自定义样式
            // color:'#FFFFFF', //字体图标色
            // backgroundColor:'rgba(0,0,0,.5)', //背景色
            fontSize: 12,
          }, 
          iconSize: 16, //Number 自定义icon大小(单位px 默认16 设置后会覆盖自定义样式里的设置优先级最高)
          iconColor: '', //String icon颜色(默认主题颜色 设置后会覆盖自定义样式里的设置优先级最高)
        })
      })
    },
  },
  watch:{
    InfoForm:{
      handler(val){
        if(val.height && val.weight){
          this.BMI = (Number(val.weight) / ( Number(val.height) *  Number(val.height) /10000)).toFixed(2)
        }
      },  
      deep: true
    }
  }
};
</script>

<style lang="scss">

// 指数 start
.qing{
  color: #263238;
  font-weight: 600;
}
.zhengchang{
  color: #004D40;
  font-weight: 600;
}
.chaozhong{
  color: #BF360C;
  font-weight: 600;
}
.feipang{
  color: #B71C1C;
  font-weight: 600;
}
// 指数 end
.bottom-inner{
  padding: 20px;
  margin-top: 20px;
  background: #fff;
  border-radius: 10px;
  .bottom-title{
    font-size: 18px;
    color: #333;
    font-weight: 600;
    position: relative;
    text-indent: 10px;
    margin: 10px 0 14px 0;
  }
  .bottom-title:before{
    content: '';
    height: 80%;
    width: 4px;
    background: $u-primary;
    position: absolute;
    left: 0;
    top: 5%;
    border-radius: 4px;
  }

  .text-box{
    font-size: 16px;
    padding: 18px 0;
    .text-box-title{
      color: #333;
    }
  }
}

.bottom-box{
  margin-top: 20px;
  .u-button{
    width: fit-content;
    padding: 0 80px;
    font-size: 16px;
  }
}
::deep(.u-form-item__body__right){
  flex: none;
}
::deep(.u-form-item__body){
  width: 260px;
}
::deep(.u-text){
  justify-content: center !important;
  .u-text__value{
    font-size: 16px !important;
  }
  .u-text__value--tips{
    font-size: 12px !important;
  }
}
::deep(.u-steps-item__wrapper){
  background: #f5f5f5;
}
::deep(.u-input__content__subfix-icon){
  .u-icon{
    .u-icon__icon{
      span{
        display: none !important;
      }
    }
  }
}
.u-form-item{
  padding-bottom: 10px;
  position: relative;
}
::deep(.u-form-item__body__right__message){
  position: absolute !important;
  bottom: 0px !important;
}

</style>